<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>激活</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body,
        html {
            background-color: rgba(0, 0, 0, 0);
        }

        .activation-background {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 336px;
            height: 458px;
            padding-top: 130px;
            background-image: url("../../image/ui/bg_5.png");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: auto;
        }

        .activation-content-area {
            width: 290px;
            height: 300px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
        }

        .activation-title {
            font-size: 20px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            margin: 15px 0;
        }

        .activation-line {
            margin: 15px 8px;
        }

        .activation-attribute {
            width: 72px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .activation-attribute-value {
            font-size: 15px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .activation-form {
            width: 180px;
            height: 36px;
            line-height: normal;
            text-indent: 10px;
            background: rgba(245, 245, 245, 1) !important;
            border-radius: 6px !important;
        }

        .activation-form::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(193, 193, 193, 1);
            line-height: normal;
            overflow: visible;
        }

        .activation-submit {
            width: 137px;
            height: 46px;
            background-image: url("../../image/ui/btn_4.png");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: 25px auto;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            font-size: 18px;
            text-align: center;
            padding-top: 8px;
        }

        .radio {
            width: 18px;
            height: 18px;
            background-image: url("../../image/ui/radio_2.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-right: 6px;
        }

        .checked {
            background-image: url("../../image/ui/checked_2.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .mr-31 {
            margin-right: 31px;
        }

        .bg-black {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="bg-black" onclick="closeFrame()"></div>
        <div class="activation-background" data-flex="main:center cross:center">
            <div class="activation-content-area">
                <div class="activation-title">立即激活</div>
                <div class="activation-line" data-flex="cross:center">
                    <div class="activation-attribute">课程名称:</div>
                    <div class="activation-attribute-value">{{ courseName }}</div>
                </div>
                <div class="activation-line" data-flex="cross:center">
                    <div class="activation-attribute">激活方式:</div>
                    <div class="radio" :class="{checked: active === 1}" @click="active = 1"></div>
                    <div class="activation-attribute-value mr-31">扫码</div>
                    <div class="radio" :class="{checked: active === 2}" @click="active = 2"></div>
                    <div class="activation-attribute-value">激活码</div>
                </div>
                <div class="activation-line" v-show="active === 2" data-flex="cross:center">
                    <div class="activation-attribute">激活码:</div>
                    <input class="activation-form" v-model="param.materialSequenceNum" type="text" placeholder="请输入激活码">
                </div>
                <div class="activation-submit" @click="active === 2 ? activation() : openScanner()">
                    {{ active === 2 ? '激活' : '扫码' }}</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-attr.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
        // 扫码成功后执行
        api.addEventListener({
            name: 'scanCourseCode'
        }, function (ret) {
            vm.param.materialSequenceNum = ret.value.code;
            activation();
            // fnGetCourseCode(ret.value.code);
        })
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                api: 'course/unlockCourseBySeqNum',
                param: {
                    // 课程id
                    'id': pageParam.id,
                    // 激活码
                    'materialSequenceNum': ''
                },
                // 课程名称
                courseName: pageParam.courseName,
                // 选中 1 扫码 2 激活码
                active: 2,
                // 是否解锁成功
                isUnlock: false
            }
        });
    }

    // 打开扫码页面
    function openScanner() {
        fnOpenScanner(1)
    }

    // 根据序列号ID获取序列号
    function fnGetCourseCode(id) {
        var url = 'common/get';
        var params = {
            "entityName": "StuMaterialSequenceNum",
            "id": id
        };
        var callback = function(data) {
            var code = data.materialSequenceNum;
            if(!code) {
                fnToast('扫码出错,请重新扫码');
                return;
            }
            vm.param.materialSequenceNum = code;
            activation();
        };
        POST(url, params, callback);
    }

    // 激活
    function activation() {
        if(vm.param.materialSequenceNum == '') {
            fnToast('激活码不能为空');
            return;
        }
        var params = vm.param;
        var url = vm.api;
        var callback = function (data) {
            if(data.errorMessage) {
                fnToast(data.errorMessage);
                return;
            }
            if(data.errorStatus == '6666') {
                fnToast('当前课程已在后台激活过了');
                api.execScript({
                    frameName: pageParam.frmName,
                    script: 'getModule4();'
                });
                setTimeout(function() {
                    api.closeFrame();
                },500);
            } else {
                vm.isUnlock = true;
                api.execScript({
                    frameName: pageParam.frmName,
                    script: 'getModule4();'
                });
                openAlert();
            }    
        };
        POST(url, params, callback);
    }

    // 打开弹窗
    function openAlert() {
        $S.CloseProgress();
        setTimeout(function() {
            fnOpenFrame({
                name: 'tips',
                url: './tips.html',
                pageParam: {
                    isUnlock: vm.isUnlock
                } 
            });
            api.closeFrame();
        }, 500)
    }

    // 关闭
    function closeFrame() {
        api.closeFrame();
    }
</script>

</html>